import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Grid } from '@material-ui/core';
import { Image } from 'components/atoms';
import { SectionHeader } from 'components/molecules';
import { Section, CardProduct } from 'components/organisms';

const useStyles = makeStyles(theme => ({
  root: {
    [theme.breakpoints.down('sm')]: {
      maxWidth: 400,
      margin: '0 auto',
    },
  },
  cardProduct: {
    display: 'flex',
    flexDirection: 'column',
    borderRadius: theme.spacing(1),
    background: 'transparent',
    boxShadow: 'none',
    '& .card-product__content': {
      padding: theme.spacing(2),
    },
    '& .card-product__media': {
      minHeight: 300,
    },
  },
  image: {
    objectFit: 'cover',
  },
  blogTitle: {
    fontWeight: 700,
  },
  tags: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  tag: {
    fontWeight: 700,
    margin: theme.spacing(0, 1, 1, 0),
  },
  author: {
    margin: theme.spacing(1, 0),
    [theme.breakpoints.up('md')]: {
      margin: theme.spacing(2, 0),
    },
  },
  fontWeightBold: {
    fontWeight: 'bold',
  },
}));

const VerticalTransparent = props => {
  const { data, className, ...rest } = props;
  const classes = useStyles();
  const token = localStorage.getItem('token');

  const BlogMediaContent = props => (
    <Image
      {...props}
      className={classes.image}
      lazyProps={{ width: '100%', height: '100%' }}
    />
  );

  const BlogContent = props => (
    <div className='content-center w-100'>
      <div className={classes.tags}>
        {props.tags.map((item, index) => (
          <Typography
            variant="overline"
            color="primary"
            className={classes.tag}
            key={index}
          >
            {item}
          </Typography>
        ))}
      </div>
      <Typography
        variant="h6"
        color="textPrimary"
        className={classes.blogTitle}
        align="center"
      >
        {props.title}
      </Typography>
      <Typography
        variant="body2"
        color="textPrimary"
        className={classes.author}
        align="center"
      >
        <i>
          {props.author.name}
        </i>
      </Typography>
      <Typography variant="body1" color="textPrimary" align="center">
        {props.subtitle}
      </Typography>
    </div>
  );

  return (
    <div className={clsx(classes.root, className)} {...rest}>
      <SectionHeader
        title="Seasons"
        subtitle={data.length + ' seasons'}
        titleProps={{
          className: clsx(classes.fontWeightBold),
          variant: 'h2',
        }}
        data-aos="fade-up"
      />
      <Grid container spacing={2}>
        {data.map((item, index) => (
          <Grid item xs={12} md={4} key={index} data-aos="fade-up">
            <CardProduct
              liftUp
              className={classes.cardProduct}
              onClick={() => {
                window.location.href = `${process.env.REACT_APP_SERVER_URL}player/season/${item.id}/${token}`;
              }}
              mediaContent={
                <BlogMediaContent {...{ src: item.avatarURL }} alt={item.title} />
              }
              cardContent={
                <BlogContent
                  title={item.name}
                  subtitle={item.year}
                  author={item.episodeCount + 'Songs'}
                  date=''
                  tags={['']}
                />
              }
            />
          </Grid>
        ))}
      </Grid>
    </div>
  );
};

VerticalTransparent.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  /**
   * data to be rendered
   */
  data: PropTypes.array.isRequired,
};

export default VerticalTransparent;
